Overview

This PR aims to solve this problem globally rather than just in the 1 instance spotted as I suspect this is happen frequently with translations.

• Adds hyphenation globally to elements within the editor wc.
• Excludes elements that commonly avoid hyphenation.

If we feel this is to aggressive since it does hyphen instead of wrapping nomally in some instances, we could just apply it to the info-panel in the sidebar.

Additional notes

• Will hyphenate words when browser support the language (https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)
• Added exceptions for things that should not be hyphenated (https://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation/)

Result

Note to preview this you must manually set the html lang to "de" since hyphenation relies on the browser implementation and our demo language (XX-xx) is not a real locale

Useful resources

• MDN - Wrapping breaking text

Suggested solutions

Option 1 (currently implemented)

• Add hyphen: auto globally (with exceptions)
• Progresively enchance with hyphen-limit-chars (mdn ref) to avoid over hyphenating
• Soft hyphens \u00AD can be used by the translation team to encourage preffered hyphenations

Pros:

• Covers all languages and probably majority of problems
• With hyphens we should avoid content not being visible due to overflow
• Browsers have hyphen dictionaries for different locales so this should be locale sensitive
• hyphen-limit-chars is an easy progressive enchancement, as the experience is not broken (although not ideal) without it.
• Does not require any extra effort from us or translation team to maintain.

Cons:

• Without hyphenate-limit-chars the browser seems to overly hyphen rather than wrapping text when possible, which could argueably be hard to read.
• Limited support for hyphen-limit-chars
  • No Safari support, newly supported in Firefox

Examples:

Auto inserted hyphens (hyphen limit could still be adjusted):

Without hyphen-limit-chars (en):

• As you can see it over hyphenates when it could just wrap the words

with hyphen-limit-chars(en):

Option 2

• Enable hyphens: manual. This enables the translation team to manually insert (soft) hyphens to enourage words to break in ideal positions when they are long.
• overflow-wrap: break-word; can be used as a fallback to wrap words (without hyphens) if manual soft hyphens have not been set.

Pros:

• Avoids overly hyphenating
• Accounts for cases where translation team has not set soft hyphens

Cons:

• Heavily relys on translation team (or us).
• Without a visual reference to the UI when translating too it might not be obvious when soft hyphens need to be applied.
• The fallback of overflow-wrap: break-word does NOT insert hyphens which can be confusing and hard to read.

Example:

Option 3

• We manually fix issues like this on a case by case basis for every language.

Pros:

• Quick individually to resolve issues.

Cons:

• Long term time consuming
• Increased tech/design/language debt